<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExamUser List</title>
<link href="${pageContext.request.contextPath}/static/css/jquery.dataTables.css" rel="stylesheet"/>
	<script src="${pageContext.request.contextPath}/static/js/jquery.dataTables.js"></script>
<% String name = (String)request.getSession().getAttribute("userName"); %>
<script>
$(function() {
	$('#inlineEditDataTable').DataTable({
		lengthMenu: [
		             [ 5, 10, 15, -1 ],
		             [ '5 rows', '10 rows', '15 rows', 'Show all' ]
		         ],
	          'language': {  
	                'emptyTable': '没有数据',  
	                'loadingRecords': '加载中...',  
	                'processing': '查询中...',  
	                'search': '查询:',  
	                'lengthMenu': '每页 _MENU_ 条',  
	                'zeroRecords': '没有数据',  
	                'paginate': {  
	                    'first':      '第一页',  
	                    'last':       '最后一页',  
	                    'next':       '',  
	                    'previous':   ''  
	                },  
	                'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',  
	                'infoEmpty': '没有数据',  
	                'infoFiltered': '(过滤总件数 _MAX_ 条)'  
	            },
	        "aoColumnDefs": [
	          { 'bSortable': false, 'aTargets': [ "no-sort" ] }
	        ],
	        "fnInitComplete": function(oSettings, json) { 
	          $('.dataTables_filter input').attr("placeholder", "Search");
	        }

	});
});
</script>
<script>
	$(function(){
		nameUser = "<%=name%>";
		if(nameUser == null){
			alert("请您登录！！2秒后自动跳转到登录界面。");
			var url = "${pageContext.request.contextPath }/exam/login";
			setTimeout(function() {
				window.location.href=url;
			}, 2000)
		}
	});
</script>
<script type="text/javascript">
	//删除信息提示
	 $(function() {
		if ("${msg}" != '') {
			 $("#deleteMsg").css("display","block");
				setTimeout(function(){$("#deleteMsg").css("display","none"); 
				},3000);
		}
	})
	
	$(function(){
	   $(".close").click(function(){
	      $("#myAlert").alert();
	   });
	});  
	//修改信息提示
	$(function() {
		if ("${editMsg}" != '') {
			alert("${editMsg}");
		}
	})
	 //增加信息提示
	$(function() {
		if ("${addMsg}" != '') {
			alert("${addMsg}");
			/* $("#sucMsg").css("display","block");
			setTimeout(function(){
				$("#sucMsg").css("display","none");
			},2000); */
		}
	}) 
	function update() {
		var flag = document.getElementById("edit");
		if (confirm("是否确认修改？")) {
			return true;
		}
		return false;
	}
	
	
	 function Delete() {
		//var flag = document.getElementById("delete");
		if (confirm("是否确认删除？")) {
			return true;
		}
		return false;
	}  
	
</script>
<!-- 打开新增模态框 -->
<script>
	/* $('#myAddModal').on('shown.bs.modal', function() {
		$('#myInput').focus()
		
	}) */
</script>

<!-- 打开编辑模态框 -->
<script>
	/* $('#myEditModal').on('shown.bs.modal', function() {
		$('#myInput').focus()
	}) */
</script>

<!-- 新增模态框Ajax -->
<script>
	$(function(){
		
		$("#submit").click(function(){
			if ($("#form1").valid()) {
				var name =$("#examName").val();
				var number = $("#examNumber").val();
				var password = $("#examPassword").val();
				var roleid= $("#examRoleId").val();
				var birthday = $("#examBirthday").val();
				var sex = $('input:radio:checked').val();
				var address = $("#examAddress").val();
				var tel = $("#examTel").val();
				$.ajax({
					url:"${pageContext.request.contextPath }/exam/addExam",
					dataType:"json",
					data:{
						examName:name,
						examNumber:number,
						examPassword:password,
						examRoleId:roleid,
						examSex:sex,
						examBirthdayString:birthday,
						examTel:tel,
						examAddress:address,
					},
					type:"POST",
					async:true,
					success:function(data){
						$("#sucMsg").css("display","block");
						setTimeout(function(){
							$("#sucMsg").css("display","none");
						//alert(66);
						},2000);
						if(setTimeout(function(){
							$("#sucMsg").css("display","none");
						},4000)==true){
							setTimeout(function(){
								$("#myAddModal").modal("hide");
							},4000);
						}
							var url = "${pageContext.request.contextPath }/exam/examList";
							window.location.href=url;
					},
					error:function(data){
						$("#eroMsg").css("display","block");
						setTimeout(function(){$("#eroMsg").css("display","none")},10000);
						alert("增加失败");
					}
				})
			}
		})	
		
		$("#close").click(function(){
			var url = "${pageContext.request.contextPath }/exam/examList";
			window.location.href=url;
		})
	});
</script>

<!-- 编辑模态框Ajax -->
<script>
	//取值
	function editExam(id){
		$.ajax({
			url:"${pageContext.request.contextPath }/exam/edit/"+id+"?ajax=true",
			dataType:"json",
			type:"get",
			async:true,
			success:function(data){
			$.each(data.exam, function(i, stu) {
			$("#examStuId").val(id);
			$("#examName1").val(stu.examName);
			$("#examNumber1").val(stu.examNumber);
			$("#examPassword1").val(stu.examPassword);
			if(stu.examSex=="f"){
				$("#examSex1").attr({checked:"checked"});
			}else if(stu.examSex=="m"){
				$("#examSex2").attr({checked:"checked"});
			}
			$("#examBirthday1").val(dateUtil(stu.examBirthday.time));
			$("#examTel1").val(stu.examTel);
			$("#examAddress1").val(stu.examAddress);
			})
			},
			error:function(data){
				alert("error");
			}
		});
	}
	
	function dateUtil(date_t){
		var date=new Date(date_t);
		var year=date.getFullYear();
		var month=date.getMonth()+1;
		var day=date.getDate();
		if(month<10)
			month="0"+month;
		if(day<10)
			day="0"+day;
		return year+"-"+month+"-"+day;
	}
</script>
<script type="text/javascript">
$(function(){
	$("#submit1").click(function(){
		 if ($("#form2").valid()) {
			var id1 = $("#examStuId").val();
			var roleid1 = $("#examRoleId").val();
			var name1 =$("#examName1").val();
			var number1 = $("#examNumber1").val();
			var password1 = $("#examPassword1").val();
			var birthday1 = $("#examBirthday1").val();
			var sex1 = $('input:radio:checked').val();
			var address1 = $("#examAddress1").val();
			var tel1 = $("#examTel1").val();
			$.ajax({
				url:"${pageContext.request.contextPath }/exam/edit",
				dataType:"json",
				data:{
					examStuId:id1,
					examRoleId:roleid1,
					examName:name1,
					examNumber:number1,
					examPassword:password1,
					examSex:sex1,
					examBirthdayString:birthday1,
					examTel:tel1,
					examAddress:address1,
				},
				type:"POST",
				async:true,
				success:function(data){
					$("#editSucMsg").css("display","block");
					setTimeout(function(){
						$("#editSucMsg").css("display","none");
					//alert(66);
					},2000);
					if(setTimeout(function(){
						$("#editSucMsg").css("display","none");
					},4000)==true){
						setTimeout(function(){
							$("#myEditModal").modal("hide");
						},4000);
					}
						var url = "${pageContext.request.contextPath }/exam/examList";
						window.location.href=url;
				},
				error:function(data){
					$("#editEroMsg").css("display","block");
					setTimeout(function(){$("#editEroMsg").css("display","none")},10000);
					alert("修改失败");
				}
			})
		}
	})	
		$("#close").click(function(){
			var url = "${pageContext.request.contextPath }/exam/examList";
			window.location.href=url;
		})
	});
</script>

<%-- <script src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/js/messages_zh.min.js" type="text/javascript"></script> --%>
<script type="text/javascript">
$().ready(function() {
    $("#form1").validate({
    	rules: {
    		"examName":{
    		 required:true,
    		 rangelength:[1,12]
    		},
    		"examPassword":{
    			required:true,
    			rangelength:[6,10]
    		},
    		"examNumber":{
    			required:true,
    			digits:true,
    			rangelength:[1,8]
    		},
    		"examSex":{
    			required:true,
    			maxlength:2
    		},
    		"examBirthday":{
    			required:true,
    			date:true
    		},
    		"examTel":{
    			digits:true
    		},
    		"examAddress":{
    			maxlength:30
    		}
	    },
	    messages: {
   		 "examName": "请输入姓名",
   		 "examPassword":"请正确输入密码，密码长度为6-10位",
   		 "examNumber":"请正确输入学号（学号为数字格式），学号长度为1-8位",
   		 "examSex":"请选择你的性别",
   		 "examBirthday":"请输入日期",
   		 "examAddress":"字数过多，请重新输入！"	   		
	    }
    });
});

$(function() {
    $("#form2").validate({
    	rules: {
    		"examName":{
    		 required:true,
    		 rangelength:[1,12]
    		},
    		"examPassword":{
    			required:true,
    			rangelength:[6,10]
    		},
    		"examNumber":{
    			required:true,
    			digits:true,
    			rangelength:[1,8]
    		},
    		"examSex":{
    			required:true,
    			maxlength:2
    		},
    		"examBirthday":{
    			required:true,
    			date:true
    		},
    		"examTel":{
    			digits:true
    		},
    		"examAddress":{
    			maxlength:30
    		}
	    },
	    messages: {
   		 "examName": "请输入姓名",
   		 "examPassword":"请正确输入密码，密码长度为6-10位",
   		 "examNumber":"请正确输入学号（学号为数字格式），学号长度为1-8位",
   		 "examSex":"请选择你的性别",
   		 "examBirthday":"请输入日期",
   		 "examAddress":"字数过多，请重新输入！"	   		
	    }
    });
});
</script>
</head>
<body>
		<table class="table table-hover  table-striped table-bordered" 
			cellSpacing="0" cellPadding="0" id="inlineEditDataTable">
			<thead>
			<tr style="text-align: center;" class="info">
				<td>学生Id</td>
				<td>姓名</td>
				<td>学号</td>
				<td>密码</td>
				<td>性别</td>
				<td>生日</td>
				<td>电话</td>
				<td>地址</td>
				<td>编辑</td>
				<td>删除</td>
			</tr>
			</thead>
			<tbody>
			<c:forEach items="${examlist }" var="examlist">
		
				<tr>
					<td>${examlist.examStuId }</td>
					<td>${examlist.examName }</td>
					<td>${examlist.examNumber }</td>
					<td>${examlist.examPassword }</td>
					<td>
					<c:if test="${examlist.examSex eq 'f'}">
						<span>女</span>
					</c:if>
					<c:if test="${examlist.examSex eq 'm' }">
						<span>男</span>
					</c:if>
					</td>
					<td><fmt:formatDate value="${examlist.examBirthday }" pattern="yyyy-MM-dd"/></td>
					<td>${examlist.examTel }</td>
					<td>${examlist.examAddress }</td>
					<td class="danger">
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"
						data-toggle="modal" data-target="#myEditModal" onclick="editExam(${examlist.examStuId })"></span>
					</td>
					<td class="danger"><a class="close glyphicon glyphicon-remove" href="${pageContext.request.contextPath }/exam/delete/${examlist.examStuId}" 
						data-dismiss="alert" id="delete" onclick="return Delete()"></a>	
						<%-- <span class="glyphicon glyphicon-remove" id="deleteExam"
						 value="${pageContext.request.contextPath }/exam/delete/${examlist.examStuId}"></span> --%>
					</td>	
				</tr>
			</c:forEach>
			</tbody>
						<!-- 新增图标 -->
			<tr style="text-align: center;" class="success">
				<td colspan="11" align="center"><span
					class="glyphicon glyphicon-plus btn btn-sm" aria-hidden="true"
					data-toggle="modal" data-target="#myAddModal"></span> <a href="${pageContext.request.contextPath }/exam/add"></a>
				</td>
			</tr>
			<%-- <tr style="text-align: center;" class="success">
				<td colspan="11" align="center">
					<a href="${pageContext.request.contextPath }/exam/user">GoGoGo</a>
				</td>
			</tr> --%>
		</table>
		</div>
		</div>
		<!-- 删除信息提示 -->
		<div id="deleteMsg" class="alert alert-success alert-dismissable" style="display:none;height:40px" >
					删除成功！
			 <button type="button" class="close" data-dismiss="alert" 
					  aria-hidden="true">
					  &times;
			 </button>
		</div>
		
		<!-- Modal 新增模态框 -->
		<div class="modal"  id="myAddModal" tabindex="-1" role="dialog" height="100%"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">增加学生信息</h4>
					</div>
					<div class="modal-body">
					<form:form method="post" modelAttribute="examUser" id="form1">
							 <%-- action="${pageContext.request.contextPath }/exam/addExam" --%>
						<div class="form-grop">
							<table cellSpacing="0" cellPadding="0" class="table-bordered">
								<tr class="success">
									<td>
										<label for="examName" class="control-label">姓名</label>
									<td>
									<td>
										<form:errors></form:errors>
										<form:input path="examName" class="form-control" id="examName" required="required"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examPassword" class="control-label">密码</label>
									<td>
									<td>
										<form:input path="examPassword" id="examPassword" type="password" required="required" class="form-control"/>
									</td>
								</tr>
								<tr>
									<!-- <td>
										<label for="examRoleId" class="control-label">角色</label>
									<td>
									<td> -->
										<form:input path="examRoleId" id="examRoleId" required="required" value="1" type="hidden" readonly="true" class="form-control"/>
									<!-- </td> -->
								</tr>
								<tr>
									<td>
										<label for="examNumber" class="control-label">学号</label>
									<td>
									<td>
										<form:input path="examNumber" id="examNumber" required="required" class="form-control"/>
									</td>
								</tr>
								
								<tr>
									<td>
										<label for="examSex" class="control-label">性别</label>
									<td>
									<td>
										<form:radiobutton path="examSex" required="required" id="examSex" checked="checked" value="m"/>男&nbsp;&nbsp;
										<form:radiobutton path="examSex" required="required" id="examSex" value="f"/>女
									</td>
								</tr>
								<tr>
									<td>
										<label for="examBirthday" class="control-label">生日</label>
									<td>
									<td>
										<form:input path="examBirthday" required="required" name="examBirthday" class="Wdate" onClick="WdatePicker()" id="examBirthday"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examTel" class="control-label">电话</label>
									<td>
									<td>
										<form:input path="examTel" id="examTel" class="form-control"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examAddress" class="control-label">地址</label>
									<td>
									<td>
										<form:input path="examAddress" id="examAddress" class="form-control"/>
									</td>
								</tr>
							</table>
						</div>
						
					<div class="modal-footer">
						<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" id="submit" class="btn btn-primary">保存</button>
						<!-- 添加信息提示 -->
						<div id="sucMsg" class="alert alert-success alert-dismissable" style="display:none">
								 <button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								增加成功！
						</div>
						<div id="eroMsg" class="alert alert-warning alert-dismissable" style="display:none">
								<button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								增加失败！
						</div>
					</div>
					</form:form>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Modal 编辑模态框 -->
		<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" height="100%"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">编辑学生信息</h4>
					</div>
					<div class="modal-body">
					<form:form method="post" modelAttribute="examUser" id="form2">
							 <%-- action="${pageContext.request.contextPath }/exam/addExam" --%>
						<div class="form-grop">
							<table cellSpacing="0" cellPadding="0" class="table-bordered">
								<form:input type="hidden" path="examStuId"/>
								<form:input type="hidden" path="examRoleId" value="1"/>
								<tr class="success">
									<td>
										<label for="examName" class="control-label">姓名</label>
									<td>
									<td>
										<form:input path="examName" name="examName1" class="form-control" id="examName1" required="required"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examPassword" class="control-label">密码</label>
									<td>
									<td>
										<form:input path="examPassword" name="examPassword1" id="examPassword1" type="password" required="required" class="form-control"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examNumber" class="control-label">学号</label>
									<td>
									<td>
										<form:input path="examNumber" name="examNumber1" id="examNumber1" required="required" class="form-control"/>
									</td>
								</tr>
								
								<tr>
									<td>
										<label for="examSex" class="control-label">性别</label>
									<td>
									<td>
										<form:radiobutton path="examSex" name="examStuSex1" id="examSex1" required="required" value="f"/>女&nbsp;&nbsp;
										<form:radiobutton path="examSex" name="examStuSex1" id="examSex2" required="required" value="m"/>男
									</td>
								</tr>
								<tr>
									<td>
										<label for="examBirthday" class="control-label">生日</label>
									<td>
									<td>
										<form:input path="examBirthday" required="required" name="examBirthday1" class="Wdate" onClick="WdatePicker()" id="examBirthday1"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examTel" class="control-label">电话</label>
									<td>
									<td>
										<form:input path="examTel" name="examTel1" id="examTel1" class="form-control"/>
									</td>
								</tr>
								<tr>
									<td>
										<label for="examAddress" class="control-label">地址</label>
									<td>
									<td>
										<form:input path="examAddress" name="examAddress1" id="examAddress1" class="form-control"/>
									</td>
								</tr>
							</table>
						</div>
					<div class="modal-footer">
						<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" id="submit1" class="btn btn-primary">保存</button>
						<!-- 添加信息提示 -->
						<div id="editSucMsg" class="alert alert-success alert-dismissable" style="display:none">
								 <button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								编辑成功！
						</div>
						<div id="editEroMsg" class="alert alert-warning alert-dismissable" style="display:none">
								<button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								编辑失败！
						</div>
					</div>
					</form:form>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>